<template>
    <div>
        <div class="count-container">
            <div class="img-left">
                <img class="img" :src="icon" alt="">
            </div>
            <div class="content-right">
                <div class="content-right-title">
                    {{ title }}
                </div>
                <div class="content-right-count">
                    <span class="count-number">{{ formatter(config.number) }}</span>
                    <!-- <CountTo :num="config.number"></CountTo> -->
                    <span class="count-sub">/{{ config.subTitle }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    props: {
        config: {
            type: Object
        },
        icon: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
    },
    computed: {
        configCount() {
            return {
                number: [this.config.number],
                content: `{nt}/${this.config.subTitle}`,
                formatter: this.formatter(this.config.number),
                style: {
                    fontSize: 25,
                    fill: '#FDD15D'
                }

            }
        }
    },
    methods: {
        formatter (number) {
            const numbers = number.toString().split('').reverse()
            const segs = []

            while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

            return segs.join(',').split('').reverse().join('')
        }
    }
}
</script>

<style lang="less" scoped>
.count-container {
    display: flex;
}
.img-left {
    width: 101px;
    height: 107px;
    .img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
.content-right {
    .content-right-title {
        width: 125px;
        background: url('../../../assets/images/visual/left-bg-title.png') no-repeat;
        background-size: contain;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #BFDBEF;
        margin-top: 5px;
        text-align: left;
        padding-left: 15px;
    }
    .content-right-count {
        text-align: left;
        margin-top: 7px;
    }
}
.count-number {
    color: #FDD15D;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 25px;
    line-height: 36px;
}
.count-sub {
    color: #BFDBEF;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    margin-left: 7px;
}
</style>